<template>
  <header class="header">
    <div class="logo">小花在线</div>
    <div class="login-status">
      <!-- 移除头像容器，改为文字状态显示 -->
      <span @click="goAdmin">前往后台</span>
      &nbsp;|&nbsp;
      <span v-if="!userStore.library_token" @click="goToLogin" class="login-text">请登录</span>
      <span v-else class="username">{{ userStore.library_user?.username }}</span>
    </div>
  </header>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores/user';

const router = useRouter();
const userStore = useUserStore();

// 移除头像相关代码
const goToLogin = () => {
  router.push('/login');
};

const goAdmin = () => {
  router.push('/dashboard');
}

</script>

<style lang="scss" scoped>
.header {
  position: fixed;  // 新增固定定位
  top: 0;
  left: 0;
  width: calc(100% - 80px);     // 修改为全宽
  padding: 0 40px;
  height: 70px;
  line-height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); // 加深阴影效果
  z-index: 1000;
  // 保持原有布局样式不变...
  .logo{
    flex:1;
  }
  .login-status {
    flex:1;
    text-align:right;
    cursor: pointer;
    color: #333;
    .login-text:hover,
    .username:hover {
      color: #409eff;
    }
  }

  @media (max-width: 768px) {
    padding: 0 20px;
    width: calc(100% - 40px);
    height: 50px;
    line-height: 50px;

    .logo {
      font-size: 1.1em;
    }
  }

  @media (max-width: 480px) {
    padding: 0 15px;
    width: calc(100% - 30px);
    
    .login-status {
      font-size: 0.9em;
    }
  }

  @media (max-width: 360px) {
    padding: 0 10px;
    width: calc(100% - 20px);
    height: 45px;
    line-height: 45px;
    
    .logo {
      font-size: 1em;
    }
    
    .login-status {
      font-size: 0.85em;
    }
  }
}



</style>